<script setup lang="ts">
import { onMounted } from 'vue';
import * as echarts from 'echarts'   //echarts5版本导入方式
import { useStore } from '@/stores';
const store = useStore();

onMounted(async () => {
  await store.getData()
  initPieCharts()
  initLineCharts()

})
const initPieCharts = () => {
  const pieCharts = echarts.init(document.querySelector('.box-left-center') as HTMLElement);
  const pieData = store.cityDetail.map(item =>{
    return {
      name:item.city,
      value:item.nowConfirm
    }
  })
  pieCharts.setOption({
  backgroundColor:"#203554",
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      itemStyle: {
        borderRadius: 4,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 15,
        }
      },
      data: pieData,
    }
  ]
});
}

const initLineCharts = () => {
  const lineCharts = echarts.init(document.querySelector('.box-left-bottom') as HTMLElement);
  lineCharts.setOption({
    backgroundColor:'#203554',
    tooltip:{
      trigger:'axis'
    },
    xAxis: {
      type: 'category',
      data:store.cityDetail.map(v =>v.city),
      axisLabel:{
        
          color:'white'
      }
    },
    yAxis: {
      type: 'value',
      axisLabel:{
          color:'white'
      }
    },
    series: [
      {
        data: store.cityDetail.map(v =>v.nowConfirm),
        type: 'line',
        smooth: true
      }
    ]
  })
}
</script>
<template>
  <div class="container">
    <div class="box-left-top">
      <div class="top-top">
        <div class="child">
          <div>较上日+{{store.chinaAdd.localConfirmH5}}</div>
          <h3 style="color:#3C8CBA">{{store.chinaTotal.localConfirm}}</h3>
          <div>本土现有确诊</div>
        </div>
        <div class="child">
          <div>较上日+{{store.chinaAdd.nowConfirm}}</div>
          <h3 style="color:#3C8CBA">{{store.chinaTotal.nowConfirm}}</h3>
          <div>现有确诊</div>
        </div>
        <div class="child">
          <div>较上日+{{store.chinaAdd.confirm}}</div>
          <h3 style="color:#3C8CBA">{{store.chinaTotal.confirm}}</h3>
          <div>累计确诊</div>
        </div>
      </div>
      <div class="top-bottom">
        <div class="child">
          <div>较上日+{{store.chinaAdd.noInfect}}</div>
          <h3 style="color:#3C8CBA">{{store.chinaTotal.noInfect}}</h3>
          <div>无症状感染者</div>
        </div>
        <div class="child">
          <div>较上日+{{store.chinaAdd.importedCase}}</div>
          <h3 style="color:#3C8CBA">{{store.chinaTotal.importedCase}}</h3>
          <div>境外输入</div>
        </div>
        <div class="child">
          <div>较上日+{{store.chinaAdd.dead}}</div>
          <h3 style="color:#3C8CBA">{{store.chinaTotal.dead}}</h3>
          <div>累计发烧</div>
        </div>
      </div>
    </div>
    <div class="box-left-center">
    </div>
    <div class="box-left-bottom">
    </div>
  </div>
</template>

<style lang="css" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.box-left-top {
  margin: 20px;
  flex: 1;
  border: 1px solid black;
  background-color: #203554;
}

.box-left-center {
  margin: 20px;
  flex: 2;
  border: 1px solid black;

}

.box-left-bottom {
  margin: 20px;
  flex: 2;
  height: 33;
  border: 1px solid outset;
}

.top-top,
.top-bottom {
  display: flex;
  width: 100%
}

.child {
  color: white;
  text-align: center;
  margin: 1px;
  width: 33%;
  height: 80px;
  border: 1px black outset;
}
</style>